<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="index.js"></script>
</head>
<body>
<div id="container"></div>
</body>
<script>
    (function () {
        var music=[];
        for(var i=0 ;i<10;i++){
            music.push("歌曲"+(i+1));
        }
        var html=  $$.map(music, function (v,i) {
            return "<input type='checkbox'>"+v+"<br>";
        }).join("");

        $.selector("#container")[0].innerHTML=html;
        var btns=[
            {
                value:'全选',
                id:'all'
            },
            {
                value:'全不选',
                id:'no'
            },
            {
                value:'反选',
                id:'fan'
            }]
        console.log(new $$.prototype.init('#container'));


        $("#container")[0].innerHTML+=  $$.map(btns, function (v,i) {
            return "<button id="+v.id+">"+ v.value+"</button>"
        }).join("");

        $("#all")[0].onclick= function () {
            $$("input").each(function (i,v) {
                v.checked=true;
            })
        }
        $("#no")[0].onclick= function () {
            $$("input").each(function (i,v) {
                v.checked=false;
            })
        }
        $$.selector("#fan")[0].onclick= function () {
            $$("input").each(function (i,v) {
                v.checked=!v.checked;
            })
        }
    })()
</script>
</html>